<template>
  <div class="language-test">
    <h1>语言切换测试页面</h1>
    
    <div class="test-section">
      <h2>当前语言信息</h2>
      <p>当前i18next语言: {{ currentI18nLanguage }}</p>
      <p>localStorage中的语言: {{ localStorageLanguage }}</p>
      <p>Store中的语言: {{ storeLanguage }}</p>
      <p>组件中的语言值: {{ langValue }}</p>
    </div>

    <div class="test-section">
      <h2>翻译测试</h2>
      <p>common.welcome: {{ $t('common.welcome') }}</p>
      <p>common.welcome2: {{ $t('common.welcome2') }}</p>
      <p>common.community: {{ $t('common.community') }}</p>
      <p>assets.navigation.dashboard: {{ $t('assets.navigation.dashboard') }}</p>
      <p>assets.dashboard.learningTask: {{ $t('assets.dashboard.learningTask') }}</p>
      <p>assets.dashboard.createTask: {{ $t('assets.dashboard.createTask') }}</p>
      <p>当前语言: {{ getCurrentLanguage() }}</p>
      <p>i18next初始化状态: {{ getI18nextStatus() }}</p>
    </div>

    <div class="test-section">
      <h2>语言切换</h2>
      <el-button @click="switchToEnglish">切换到英语</el-button>
      <el-button @click="switchToChinese">切换到中文</el-button>
      <el-button @click="refreshPage">刷新页面</el-button>
    </div>

    <div class="test-section">
      <h2>Language组件</h2>
      <Language />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { t as $t, setLanguage, getCurrentLanguage } from '@/plugins/i18nPlugin'
import { useLocaleStore } from '@/stores/localeStore'
import Language from '@/components/shared/Layout/Language.vue'

const localeStore = useLocaleStore()

const currentI18nLanguage = ref('')
const localStorageLanguage = ref('')
const storeLanguage = ref('')
const langValue = ref('')

const updateLanguageInfo = () => {
  currentI18nLanguage.value = getCurrentLanguage()
  localStorageLanguage.value = localStorage.getItem('i18nextLng') || 'null'
  storeLanguage.value = localeStore.locale
  langValue.value = langValue.value
}

const switchToEnglish = async () => {
  console.log('切换到英语')
  localStorage.setItem('i18nextLng', 'en-US')
  localeStore.setLocale('en-US')
  await setLanguage('en-US')
  updateLanguageInfo()
  setTimeout(() => location.reload(), 100)
}

const switchToChinese = async () => {
  console.log('切换到中文')
  localStorage.setItem('i18nextLng', 'zh-CN')
  localeStore.setLocale('zh-CN')
  await setLanguage('zh-CN')
  updateLanguageInfo()
  setTimeout(() => location.reload(), 100)
}

const refreshPage = () => {
  location.reload()
}

const getI18nextStatus = () => {
  try {
    // 动态导入i18next来检查状态
    return 'Checking...'
  } catch (error) {
    return `Error: ${error}`
  }
}

onMounted(() => {
  updateLanguageInfo()
  console.log('语言测试页面加载完成')
  console.log('当前i18next语言:', getCurrentLanguage())
})
</script>

<style scoped>
.language-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.test-section h2 {
  margin-top: 0;
  color: #333;
}

.test-section p {
  margin: 10px 0;
}

.el-button {
  margin-right: 10px;
}
</style>
